<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>残疾人模块</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="/static/css/mdb.min.css">
  <!-- DataTables.net  -->
  <link rel="stylesheet" href="/static/css/datatables.min.css">
  <link rel="stylesheet" href="/static/css/datatables-select.min.css">
  <!-- Your custom styles (optional) -->
  <style>
    .md-form {
      margin-top: 0;
    }
  </style>
</head>

<body class="fixed-sn white-skin">

<!-- Main Navigation -->
<header>

  <!-- Sidebar navigation -->
  <div id="slide-out" class="side-nav sn-bg-4 fixed">
    <ul class="custom-scrollbar">

      <!-- Logo -->
      <li class="logo-sn waves-effect py-3">
        <div class="text-center" style="background-color: #773399; border-radius: 5px; margin: 0 5px;">
          <a href="#" class="pl-md-1"><strong style="color: white">欧桥数字化管理系统</strong></a>
        </div>
      </li>

      <!-- Side navigation links -->
      <li style="top: -20px; position: relative;">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a href="/" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-th-large"></i>总&nbsp;&nbsp;&nbsp;&nbsp;览</a>
          </li>
          <li>
            <a href="/datas/partyMember" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-user-tie"></i>党&nbsp;&nbsp;&nbsp;&nbsp;员</a>
          </li>
          <li>
            <a href="/datas/villager" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-users"></i>村&nbsp;&nbsp;&nbsp;&nbsp;民</a>
          </li>

          <li>
            <a href="/datas/women" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-female"></i>妇&nbsp;&nbsp;&nbsp;&nbsp;女</a>
          </li>
          <li>
            <a href="/datas/newCitizen" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-male fa-2x"></i>新市民</a>
          </li>

          <li>
            <a href="/datas/religion" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-church"></i>宗&nbsp;&nbsp;&nbsp;&nbsp;教</a>
          </li>

          <li>
            <a href="/datas/enterprise" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-building"></i>企&nbsp;&nbsp;&nbsp;&nbsp;业</a>
          </li>

          <li>
            <a href="/datas/nine" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-truck-moving"></i>九&nbsp;&nbsp;&nbsp;&nbsp;小</a>
          </li>


          <li>
            <a href="/datas/lowIncome" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-id-badge"></i>低&nbsp;&nbsp;&nbsp;&nbsp;保</a>
          </li>

          <li>
            <a href="/datas/agricultural" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-seedling"></i>农&nbsp;&nbsp;&nbsp;&nbsp;业</a>
          </li>

          <li>
            <a href="/datas/environment" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-cloud-moon"></i>环&nbsp;&nbsp;&nbsp;&nbsp;境</a>
          </li>
          <li class="active" style="background-color: #86cfda">
            <a href="/datas/handicapped" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-wheelchair"></i>残疾人</a>
          </li>

          <li>
            <a href="/datas/veterans" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-user-injured"></i>退役军人</a>
          </li>
          <li>
            <a href="/datas/project" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-snowplow"></i>工程管理</a>
          </li>

          <li>
            <a href="/data/asset" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-yen-sign"></i>资产管理</a>
          </li>
          <li>
            <a href="/datas/lowIncomeMargin" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-street-view"></i>低保边缘</a>
          </li>

          <li>
            <a href="/datas/lowIncomeFamily" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-user-friends"></i>低收入家庭</a>
          </li>
        </ul>
      </li>
      <!-- Side navigation links -->

    </ul>
    <div class="sidenav-bg mask-strong"></div>
  </div>
  <!-- Sidebar navigation -->

  <!-- Navbar -->
  <nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">

    <!-- SideNav slide-out button -->
    <div class="float-left">
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
    </div>

    <!-- Breadcrumb -->
    <div class="breadcrumb-dn mr-auto">
      <p></p>
    </div>

    <div class="d-flex change-mode">

      <!-- Navbar links -->
      <ul class="nav navbar-nav nav-flex-icons ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown"
             aria-haspopup="true" aria-expanded="false">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fas fa-user"></i>
              {% if request.session.user_info %}
                {{ request.session.user_info.fullname }}
              {% else %}
                <span onclick="location.href='/users/login/'">登录</span>
              {% endif %}
            </span>
          </a>
          {% if request.session.user_info %}
            <div class="dropdown-menu dropdown-menu-right align-content-center" aria-labelledby="userDropdown">
              <a class="dropdown-item" href="#"><i class="fas fa-user" style="margin-right: 15px"></i>个人信息</a>
              <a class="dropdown-item" href="/users/logout/">
                <i class="fas fa-sign-out-alt" style="margin-right: 15px"></i>退出登录</a>
            </div>
          {% endif %}
        </li>
      </ul>
      <!-- Navbar links -->

    </div>

  </nav>
  <!-- Navbar -->

  <!-- Fixed button -->
  <div class="fixed-action-btn clearfix d-none d-xl-block" style="bottom: 45px; right: 24px;">

    <a class="btn-floating btn-lg red">
      <i class="fas fa-pencil-alt"></i>
    </a>

    <ul class="list-unstyled">
      <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
      <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
      <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
    </ul>

  </div>
  <!-- Fixed button -->

</header>
<!-- Main Navigation -->

<!-- Main layout -->
<main>

  <div class="container-fluid">
    <section class="mb-5">
      <div class="card">
        <div style="height: 60px; text-align: center; margin-top: -1.25rem; border-radius: 5px"
             class="view view-cascade gradient-card-header blue-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">
          <a href="" class="white-text mx-3">村民信息表维护</a>
        </div>
        <form action="" onsubmit="return false" id="villager_show_form">
          <div class="row" style="margin: 20px 20px 5px 20px">
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="group" class="form-control">
                <label for="f2" class="">组别</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">

              <div class="md-form md-outline">
                <input type="text" name="house_number" class="form-control">
                <label for="f2" class="">门牌号</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="fullname" class="form-control">
                <label for="f2" class="">姓名</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="gender" class="form-control">
                <label for="f2" class="">性别</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="id_card" class="form-control">
                <label for="f2" class="">身份证</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="relationship" class="form-control">
                <label for="f2" class="">与户主关系</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="phone_number" class="form-control">
                <label for="f2" class="">电话</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">

              <div class="md-form md-outline">
                <input type="text" name="registered_residence" class="form-control">
                <label for="f2" class="">户籍所在地</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="current_residence" class="form-control">
                <label for="f2" class="">现住地</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="work_units" class="form-control">
                <label for="f2" class="">工作单位</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="political_status" class="form-control">
                <label for="f2" class="">政治面貌</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="homestead_area" class="form-control">
                <label for="f2" class="">宅基地面积</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">

              <div class="md-form md-outline">
                <input type="text" name="education_level" class="form-control">
                <label for="f2" class="">文化程度</label>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <div class="md-form md-outline">
                <input type="text" name="graduated_school" class="form-control">
                <label for="f2" class="">毕业院校</label>
              </div>
            </div>
            <div class="col-md-12" style="text-align: center; padding: 0 0 20px 0">
              <button class="btn danger-color btn-sm" id="login_submit"
                      onclick="deleteVillagerData(window.villagerIndex)">删&nbsp;&nbsp;&nbsp;&nbsp;除
              </button>
              <button class="btn primary-color btn-sm" id="login_submit"
                      onclick="updateVillagerData(window.villagerIndex)">修&nbsp;&nbsp;&nbsp;&nbsp;改
              </button>
              <button class="btn success-color btn-sm" id="login_submit"
                      onclick="createVillagerData(window.villagerIndex)">新&nbsp;&nbsp;&nbsp;&nbsp;增
              </button>
            </div>
          </div>
        </form>
      </div>
    </section>

    <section class="mb-5">

      <!-- Grid row -->
      <div class="card card-cascade narrower z-depth-1">
        <div class="card">
          <div style="height: 60px"
               class="view view-cascade gradient-card-header blue-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">
            <a href="" class="white-text mx-3">村民信息表</a>
          </div>
          <div class="px-4">
            <div class="table-responsive">
              <table id="dt-material-checkbox" class="table table-hover mb-0 villager_table" cellspacing="0"
                     width="100%" style="margin: 0 20px">
                <thead>
                <tr>
                  <th class="th-sm"></th>
                  <th class="th-sm" style="width: auto">姓名</th>
                  <th class="th-sm" style="width: auto">联系方式</th>
                  <th class="th-sm" style="width: auto">现居住地</th>
                  <th class="th-sm" style="width: auto">工作单位</th>
                  <th class="th-sm" style="width: auto">政治面貌</th>
                </tr>
                </thead>
                <tbody>
                {% for data in data_list %}
                  <tr>
                    <td onclick="getVillagerData({{ data.id }})"></td>
                    <td>{{ data.fullname }}</td>
                    <td>{{ data.phone_number }}</td>
                    <td>{{ data.current_residence }}</td>
                    <td>{{ data.work_units }}</td>
                    <td>{{ data.political_status }}</td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </section>
  </div>

</main>
<!-- Main layout -->

<!-- Footer -->
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">

  <!-- Copyright -->
  <div class="footer-copyright py-3 text-center">
    <div class="container-fluid">
      © 2021 Copyright: <a href="#"> oqiao-master </a>
    </div>
  </div>

</footer>
<!-- Footer -->

<!-- SCRIPTS  -->
<!-- JQuery  -->
<script src="/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips  -->
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript  -->
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript  -->
<script type="text/javascript" src="/static/js/mdb.min.js"></script>
<!-- DataTables  -->
<script type="text/javascript" src="/static/js/datatables.min.js"></script>
<!-- DataTables Select  -->
<script type="text/javascript" src="/static/js/datatables-select.min.js"></script>
<!-- Custom scripts -->
<script>
  // SideNav Initialization
  $(".button-collapse").sideNav();

  let container = document.querySelector('.custom-scrollbar');
  var ps = new PerfectScrollbar(container, {
    wheelSpeed: 2,
    wheelPropagation: true,
    minScrollbarLength: 20
  });

  $('#dtMaterialDesignExample').DataTable();

  $('#dt-material-checkbox').dataTable({

    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'
    }
  });

  $('#dtMaterialDesignExample_wrapper, #dt-material-checkbox_wrapper').find('label').each(function () {
    $(this).parent().append($(this).children());
  });
  $('#dtMaterialDesignExample_wrapper .dataTables_filter, #dt-material-checkbox_wrapper .dataTables_filter').find(
    'input').each(function () {
    $('input').removeClass('form-control-sm');
  });
  $('#dtMaterialDesignExample_wrapper .dataTables_length, #dt-material-checkbox_wrapper .dataTables_length').addClass(
    'd-flex flex-row md-form');
  $('#dtMaterialDesignExample_wrapper .dataTables_filter, #dt-material-checkbox_wrapper .dataTables_filter').addClass(
    'md-form');
  $('#dtMaterialDesignExample_wrapper select, #dt-material-checkbox_wrapper select').removeClass(
    'custom-select custom-select-sm form-control form-control-sm');
  $('#dtMaterialDesignExample_wrapper select, #dt-material-checkbox_wrapper select').addClass('mdb-select');
  $('#dtMaterialDesignExample_wrapper .mdb-select, #dt-material-checkbox_wrapper .mdb-select').materialSelect();
  $('#dtMaterialDesignExample_wrapper .dataTables_filte, #dt-material-checkbox_wrapper .dataTables_filterr').find(
    'label').remove();

</script>
<script>
  $('#dt-material-checkbox_length label').empty();
</script>
<script>
  $('thead tr').children('th').css('width', 'auto')
</script>
<script>
  window.villagerIndex = -1;

  // 获取数据
  function getVillagerData(id) {
    window.villagerIndex = id;
    $.ajax({
      url: '/datas/getVillagerById/',
      type: 'POST',
      data: {'id': id},
      dataType: 'JSON',
      success: function (arg) {
        for (let p in arg) {
          $("input[name=" + p + "]").val(arg[p])
        }
        $('#villager_show_form input').next().attr('class', 'active');
      }
    })
  }

  // 删除数据
  function deleteVillagerData(id) {
    if (confirm("是否删除该条数据？")) {
      $.ajax({
        url: '/datas/deleteVillager/',
        type: 'POST',
        data: {'id': id},
        dataType: 'JSON',
        success: function (arg) {
          alert("数据删除成功...")
          location.href = '/datas/villager'
        }
      })
    }
  }

  //添加数据
  function createVillagerData(id) {
    window.villagerIndex = -1;
    $.ajax({
      url: '/datas/createVillager/',
      type: 'POST',
      data: $('#villager_show_form').serialize(),
      dataType: 'JSON',
      success: function (arg) {
        alert("数据添加成功...")
        location.href = '/datas/villager'
      }
    })
  }

  //更新数据
  function updateVillagerData(id) {
    window.villagerIndex = -1;
    console.log($('#villager_show_form').serialize() + '&id=' + id)
    $.ajax({
      url: '/datas/updateVillager/',
      type: 'POST',
      data: $('#villager_show_form').serialize() + '&id=' + id,
      dataType: 'JSON',
      success: function (arg) {
        alert("数据添加成功...")
        location.href = '/datas/villager'
      }
    })
  }
</script>
</body>

</html>
